<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>18-3D看房</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .process {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 20px;
      }
      .color-selector {
        position: absolute;
        top: 0;
        right: 20px;
      }
    </style>
  </head>

  <body>
    <script type="module">
      // 引入three.js
      import * as THREE from "three";
      //引入物理引擎cannon
      import * as Cannon from "cannon";
      import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
      import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
      import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
      import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";

      //创建场景
      const scene = new THREE.Scene();

      //创建相机
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      //设置相机位置
      camera.position.set(0, 0, 30); //统一设置
      //设置相机朝向点位
      camera.lookAt(0, 0, 0);
      scene.add(camera);

      //创建渲染器
      const renderer = new THREE.WebGLRenderer({
        antialias: true, //减少边缘齿轮
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true; //开启阴影投射
      document.body.appendChild(renderer.domElement);

      //贴图
      const textureLoader = new THREE.TextureLoader();
      //3D房间图片
      // const images = [
      //   "../images/house/left.png",
      //   "../images/house/right.png",
      //   "../images/house/top.png",
      //   "../images/house/bottom.png",
      //   "../images/house/front.png",
      //   "../images/house/back.png",
      // ];
      // let materials = [];
      // images.forEach((img) => {
      //   const texture = textureLoader.load(img);
      //   const material = new THREE.MeshBasicMaterial({
      //     map: texture,
      //   });
      //   materials.push(material);
      // });

      // //创建立方体盒子
      // const cube = new THREE.Mesh(new THREE.BoxGeometry(40, 40, 40), materials);
      // cube.geometry.scale(12, 12, -12);
      // scene.add(cube);

      //加载球体贴图
      const texture = textureLoader.load("../images/house/kitchen.jpg");
      //创建球体
      const sphereGeometry = new THREE.sphereGeometry(16, 32, 32);
      const sphereMaterial = new THREE.MeshBasicMaterial({
        map: texture,
      });
      const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      scene.add(sphere);

      //控制插件
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true; //开启惯性,需要和update方法配合使用

      //动画函数
      const clock = new THREE.Clock();
      function animate() {
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
      }
      animate();
    </script>
  </body>
</html>
